<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"></meta>
    <meta http-equiv="Expires" content="0"></meta>
    <meta http-equiv="Cache-Control" content="no-cache"></meta>
    <meta http-equiv="Cache-Control" content="no-store"></meta>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"></meta>
    <title>Topview</title>
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"></link>
    <link th:href="@{/css/login.css}" rel="stylesheet"></link> 
    <!--[if lt IE 9]>
    <meta http-equiv="refresh" content="0;ie.html"/>
    <![endif]-->
    <script> 
        if (window.top !== window.self) {
            window.top.location = window.location;
        }
    </script>
</head>
<body>
	<div class="login signin">
        <div class="signinpanel">
            <div class="row">
                <div class="col-sm-7">
                    <div class="signin-info">
                        <div class="logopanel m-b"><h1>BootDo</h1></div>
                        <div class="m-b"></div>
                        <h3>欢迎使用 <strong>{{title}}</strong></h3>
                        <ul class="m-b">
                            <li><i class="fa fa-arrow-circle-o-right m-r-xs"></i>springBoot</li>
                            <li><i class="fa fa-arrow-circle-o-right m-r-xs"></i>mybatis</li>
                            <li><i class="fa fa-arrow-circle-o-right m-r-xs"></i>security</li>
                            <li><i class="fa fa-arrow-circle-o-right m-r-xs"></i>thymeleaf</li>
                            <li><i class="fa fa-arrow-circle-o-right m-r-xs"></i>bootstrap</li>
                        </ul>
                    </div>
                </div>

                <div class="col-sm-5">
                    <form id="signupForm" th:action="@{/a/login}" method="post" novalidate>
                        <h3 class="text-center">用户登录</h3>
                        <p class="m-t-md text-center">欢迎登录高管看板</p>
                        <input type="text" name="username" class="form-control uname m-b required" th:value="${username}"/>
                        <input type="password" name="password" class="form-control pword m-b required" autocomplete="new-password"/>
	            		<div class="form-code">
	            			<input name="validateCode" type="text" class="form-control" style="width: 50%;float: left;margin-top: 0;"/>
	            			<img class="form-code-img" th:src="@{/a/validateCode}" onclick="refreshImg();"/>
	            			<a class="form-code-a" href="javascript:" onclick="refreshImg();" >看不清</a>
	            		</div>
	            		<div class="form-rememberMe">
	                		<label class="rememberMe" for="rememberMe" title="下次不需要再登录">
	                			<input type="checkbox" id="rememberMe" name="rememberMe" style="float: left;"><span style="font-size: 12px;margin-left: 5px; padding-top: 3px;float: left;">记住密码</span>
	                		</label>
	                		<span style="font-weight: bold; color: #ea5200; float: right;" th:text="${message}"></span>
	            		</div>
                        <input class="btn btn-login btn-block btn-primary" type="submit" value="登 录"/>
                    </form>
                </div>
            </div>

            <div class="signup-footer">
                <div class="pull-left">&copy; 2017 All Rights Reserved. BootDo</div>
            </div>
        </div>
    </div>
    
	<script th:inline="javascript"> var ctx = [[@{/}]]; </script>
   	<!-- jQuery 3 -->
	<script th:src="@{/js/jquery.min.js}"></script>
	<!-- Bootstrap 3.3.7 -->
	<script th:src="@{/js/bootstrap.min.js}"></script>
	<script th:src="@{/js/plugins/validate/jquery.validate.min.js}"></script>
	<script th:src="@{/js/plugins/validate/messages_zh.min.js}"></script>	
	<script type="text/javascript">
		$(document).ready(function () {
			$("#signupForm").validate({
				rules: {
					username: "required",
					password: {required: true,minlength: 6},
				},
				messages: {
					username: "请输入用户名", 
					password: {required: "请输入密码", minlength: "密码字少6位"}, 
				},
				submitHandler:function(form){
		            form.submit();
				} 
			});
	    });
		function refreshImg() {
			var timestamp = new Date().getTime();
			$(".form-code-img").attr("src", ctx + "/a/validateCode?timestamp=" + timestamp);
		}
	</script>
</body>
</html>